<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('奖励列表')" />
    <style>
        .track-list {
            margin: 20px;
            padding-left: 5px;
            position: relative;
        }

        .track-list ul {
            padding-left: 0;
            list-style: none;
            max-height: 50vh;
            overflow-y: auto;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            background-color: #f9f9f9;
            padding: 10px;
        }

        .track-list li {
            position: relative;
            padding: 5px 0 10px 25px;
            line-height: 1.4;
            border-left: 2px solid #d9d9d9;
            color: #666;
            transition: all 0.4s ease;
        }
        .modal-right {
            position: fixed;
            right: 0;
            margin: 0;
            height: 100%;
            display: flex;
            align-items: stretch;
        }

        .modal-right .modal-content {
            height: 100%;
            width: 70%;
            margin-left: auto;
        }
        .modal-right .but{
            position: absolute;
            right: 2%;
            bottom: 1.3%;
            background: red;
            color: white;
            border: none;
            border-radius: 4px;
        }

        .progress_inner {
            height: 80px;
            width: 100%;
            position: relative;
        }

        .progress_inner__step {
            width: 33.33%;
            font-size: 12px;
            padding: 0 5px;
            transition: all 0.4s;
            float: left;
            text-align: center;
            position: relative;
        }

        .progress_inner__step label {
            padding-top: 30px;
            display: block;
            position: relative;
            cursor: pointer;
        }

        .progress_inner__step:before {
            content: "1";
            width: 24px;
            height: 24px;
            color: #2196F3;
            background: white;
            line-height: 22px;
            border: 2px solid #2196F3;
            font-size: 12px;
            top: 0;
            border-radius: 50%;
            transition: all 0.4s;
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
            font-weight: bold;
            z-index: 11;
        }

        .progress_inner__step:nth-of-type(2):before {
            content: "2";
            color: #9E9E9E;
            border-color: #9E9E9E;
        }

        .progress_inner__step:nth-of-type(3):before {
            content: "3";
            color: #9E9E9E;
            border-color: #9E9E9E;
        }

        .progress_inner__step.completed:before {
            content: "✓";
            color: #4CAF50;
            border-color: #4CAF50;
            line-height: 22px;
            font-size: 14px;
        }

        .progress_inner__step.active:before {
            color: #2196F3;
            border-color: #2196F3;
            background: white;
        }

        .progress_inner__step.pending:before {
            color: #9E9E9E;
            border-color: #9E9E9E;
            background: white;
        }

        .progress_inner__bar {
            height: 3px;
            left: 16.665%;
            right: 16.665%;
            background: #E0E0E0;
            position: absolute;
            top: 12px;
            z-index: -1;
            border-radius: 3px;
            overflow: hidden;
        }

        .progress_inner__bar--progress {
            height: 100%;
            background: #4CAF50;
            width: 0;
            transition: width 0.6s ease;
        }

        .status-text {
            color: #9E9E9E;
            font-weight: normal;
            transition: all 0.4s;
            font-size: 12px;
        }

        .status-text.active {
            color: #2196F3;
            font-weight: bold;
        }

        .status-text.completed {
            color: #4CAF50;
            font-weight: bold;
        }

        .buttons {
            margin-top: 20px;
            text-align: center;
        }

        button {
            background: #2196F3;
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 3px;
            margin: 0 8px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s;
            font-size: 12px;
        }

        button:hover {
            background: #1976D2;
        }

        button:last-child {
            background: #9E9E9E;
        }

        button:last-child:hover {
            background: #757575;
        }

        /* 新增的流程记录样式 */
        .timeline-title {
            font-weight: bold;
            font-size: 14px;
            color: #333;
            text-align: left;
            margin: 0 0 25px 20px;
            max-width: 500px;
            margin-left: auto;
            margin-right: auto;
            position: relative;
            padding-bottom: 15px;
        }

        .timeline-title::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 0.5px;
            /*background: linear-gradient(to right, #e0e0e0, #a0a0a0, #e0e0e0);*/
            background: linear-gradient(to right,
            rgba(224,224,224,0.8),
            rgba(224,224,224,0.8),
            rgba(224,224,224,0.8)); /* 添加透明度使线条更柔和 */
            box-shadow: 0 0.5px 1px rgba(0,0,0,0.07);
        }

        .track-rcol {
            width: 100%;
            max-width: 500px;
            margin: 20px auto;
            /*width: 450px;*/
            /*!*border: 1px solid #eee;*!*/
            /*margin: 20px auto;*/
            /*background: transparent;*/
        }
        .track-list {
            margin: 20px;
            padding-left: 5px;
            position: relative;
        }
        .track-list ul {
            padding-left: 0;
        }
        .track-list li {
            position: relative;
            padding: 5px 0 10px 25px;
            line-height: 1.4;
            border-left: 2px solid #d9d9d9;
            color: #666;
            list-style: none;
            /*text-align: left;*/
            transition: all 0.4s ease; /* 添加过渡效果 */
        }
        .track-list li.first {
            color: #666;
            padding-top: 0;
            /*border-left-color: #fff;*/
        }
        .track-list li .node-icon {
            position: absolute;
            left: -7px;
            top: 18px;
            width: 8px; /* 调圆点*/
            height: 8px;
            background: #C0C0C0;
            border-radius: 50%;
            transition: all 0.4s ease; /* 添加过渡效果 */
            border: 2px solid #E0E0E0;
            box-sizing: content-box;
        }
        .track-list li.first .node-icon {
            background: #C0C0C0; /* 天蓝色 */
            width: 8px;
            height: 8px;
            left: -8px;
        }
        .track-list li .time {
            display: block;
            margin-bottom: 3px;
            font-size: 11px;
            color: #888;
            transition: all 0.4s ease; /* 添加过渡效果 */
        }
        .track-list li .txt {
            display: block;
            font-size: 12px;
            transition: all 0.4s ease; /* 添加过渡效果 */
        }

        /* 悬停效果 */
        .track-list li:hover {
            color: #333;
        }
        .track-list li:hover .node-icon {
            transform: scale(1.3);
            background: #ed8088;
        }
        .track-list li:hover .time {
            color: #666;
        }

        /* 新增审核状态样式 */
        .approve-status {
            margin-top: 10px;
            text-align: center;
        }
        .approve-status label {
            margin: 0 10px;
            cursor: pointer;
        }
        .approve-status input {
            margin-right: 5px;
        }
    </style>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <shiro:hasAnyRoles name="sci_tesearch,dept_teacher,research">
                        <li>
                            <label>荣誉名称：</label>
                            <input type="text" name="rewardName"/>
                        </li>
                        <li>
                            <label>申请人：</label>
                            <input type="text" name="userName"/>
                        </li>
                        <li>
                            <label>专业：</label>
                            <input type="text" name="dname" oninput="$.table.search()" />
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                        </shiro:hasAnyRoles>
                    </ul>
                </div>
            </form>
        </div>

        <div id="toolbar"  style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
            <div class="btn-group-sm" role="group" style="display: inline-flex; gap: 8px;">
            <a class="btn btn-success" onclick="$.operate.addTab()" shiro:hasPermission="system:reward:add">
                <i class="fa fa-plus"></i> 添加
            </a>
                <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="system:reward:export">
                    <i class="fa fa-download"></i> 导出
                </a>
            </div>

                <div style="display: flex; align-items: center; gap: 15px; padding: 6px 36px; border-radius: 4px;">
                    <th:block th:replace="include :: status-circles"/>
                </div>

        </div>

        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>
<div class="wrapper wrapper-content fadeInRight" style="position: absolute; left: -9999px;">
    <div class="row">
        <div class="col-sm-4">
            <div class="ibox ">
                <div class="ibox-content">
                    <div class="modal inmodal" id="lcjl_Moda" tabindex="-1" role="dialog" aria-hidden="true">
                        <div class="modal-dialog modal-right" >
                            <div class="modal-content animated bounceInRight">
                                <div class="modal-header">
                                    <div class="timeline-title">流程记录</div>

                                    <!-- 原有的流程进度条部分 -->
                                    <div>
                                        <div class='progress_inner'>
                                            <div class='progress_inner__step active' id='step-1'>
                                                <label for='step-1'><span class="status-text active">待提交</span></label>
                                            </div>
                                            <div class='progress_inner__step pending' id='step-2'>
                                                <label for='step-2'><span class="status-text">审核中</span></label>
                                            </div>
                                            <div class='progress_inner__step pending' id='step-3'>
                                                <label for='step-3'><span class="status-text">已完成</span></label>
                                            </div>
                                            <div class='progress_inner__bar' style="z-index: 10">
                                                <div class='progress_inner__bar--progress' id='progress-bar'></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-body">
                                    <!-- 流程记录标题 - 放在左上角 -->


                                    <!-- 流程记录内容 - 放在流程图下方 -->
                                    <div class="track-rcol">
                                        <div class="track-list">
                                            <ul id="event-list">
                                                <li class="first">
                                                    <i class="node-icon"></i>
                                                    <span class="time" id="current-time">等待操作...</span>
                                                    <span class="txt">[新增] - 哈尔滨信息工程学院</span>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-white but" data-dismiss="modal">关闭</button>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
        var editFlag = [[${@permission.hasPermi('system:reward:edit')}]];
        var removeFlag = [[${@permission.hasPermi('system:reward:remove')}]];
        var proFlag = [[${@permission.hasPermi('system:reward:process')}]];
        var editInfo = [[${@permission.hasPermi('system:reward:info')}]];
        var hechaFlag = [[${@permission.hasPermi('system:reward:hecha')}]];
        var topTypeDatas = [[${@dict.getType('sci_top_type')}]];
        var datas = [[${@dict.getType('sys_reward_sg')}]];
        var chayueFlag = [[${@permission.hasPermi('system:reward:chayue')}]];
        var paimingDatas = [[${@dict.getType('sys_reward_paiming')}]];
        var fenleiDatas = [[${@dict.getType('sys_reward_fenlei')}]];
        var dengjiDatas = [[${@dict.getType('sys_reward_dengji')}]];

        var prefix = ctx + "system/reward";
        $(function() {

            function initTable(options) {
                // 获取当前表格的ID
                var tableId = options.id;
                // 根据表格ID生成URL
                options.url = getUrl(tableId);
                // 使用生成的选项初始化表格
                $.table.init(options);
            }

            function getUrl(tableId) {
                var year = localStorage.getItem("year");

                return prefix + "/list/"+tableId+"?year=" + year;

            }

            var options = {
                url: prefix + "/list",
                createUrl: prefix + "/add",
                updateUrl: prefix + "/edit/{id}",
                removeUrl: prefix + "/remove",
                exportUrl: prefix + "/export",
                detailUrl: prefix + "/detail/{id}",
                recallUrl: prefix + "/recall/{id}",
                pushUrl: prefix + "/push/{id}",
                addUrl: prefix + "/add",
                modalName: "奖励",
                rowStyle: rowStyle0,
                columns: [{
                    checkbox: true
                },
                    {
                        field: 'number',
                        title: '序号',
                        width:5 ,
                        align:'center',
                        switchable:false,
                        formatter:function(value,row,index){
                            //return index+1; //序号正序排序从1开始

                            //通过表的#id 可以得到每页多少条
                            var pageSize=$('#bootstrap-table').bootstrapTable('getOptions').pageSize;
                            //通过表的#id 可以得到当前第几页
                            var pageNumber=$('#bootstrap-table').bootstrapTable('getOptions').pageNumber;
                            //返回每条的序号： 每页条数 * （当前页 - 1 ）+ 序号
                            return pageSize * (pageNumber - 1) + index + 1;
                        }
                    },
                    {
                        field: 'id',
                        title: 'id',
                        visible: false
                    },
                    {
                        field: 'yname',
                        align: 'center',
                        title: '学院'
                    },
                    {
                        field: 'dname',
                        align: 'center',
                        title: '专业'
                    },
                    {
                        field: 'userName',
                        title: '申请人'
                    },
                    {
                        field: 'rewardName',
                        title: '荣誉名称'
                    },
                    {
                        field: 'rewardFenlei',
                        title: '分类',
                        formatter: function(value, row, index) {
                            return $.table.selectDictLabel(fenleiDatas, value);
                        }
                    },
                    {
                        field: 'rewardDengji',
                        title: '等级',
                        formatter: function(value, row, index) {
                            return $.table.selectDictLabel(dengjiDatas, value);
                        }
                    },
                    {
                        field: 'rewardPaiming',
                        title: '排名',
                        formatter: function(value, row, index) {
                            return $.table.selectDictLabel(paimingDatas, value);
                        }
                    },
                    {
                        field: 'jifen',
                        title: '积分'
                    },
                    {
                        title: '操作',
                        align: 'center',
                        formatter: function(value, row, index) {
                            var actions = [];
                            var huanhang = false;
                            if(row.state == 11 ){
                                if (row.userId == row.uid){
                                    actions.push('<a class="' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.push(\'' + row.id + '\')">提交&nbsp;&nbsp;&nbsp;&nbsp;</a>');
                                    actions.push('<a class="' + editFlag + '" href="javascript:void(0)" onclick="$.operate.editTab(\'' + row.id + '\')">编辑&nbsp;&nbsp;&nbsp;&nbsp;</a> ');
                                    actions.push('<a class="' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')" style="color : #c90000">删除</a>');
                                }
                                huanhang = true;
                            }else

                            if(row.state == 1 ){
                                console.log(row)
                                if (proFlag != 'hidden'){
                                actions.push('<a  class="' + proFlag + '" href="javascript:void(0)" onclick="$.operate.detailTab(\'' + row.id + '/pro' + '\')">批阅&nbsp;&nbsp;&nbsp;&nbsp;</a> ');
                                    huanhang = true;
                                }

                            }else
                            if((row.state == 3 || row.state == 5 || row.state == 7)) {
                                if (row.userId == row.uid) {
                                    actions.push('<a   class="' + editFlag + '" href="javascript:void(0)" onclick="$.operate.editTab(\'' + row.id + '\')">编辑&nbsp;&nbsp;&nbsp;&nbsp;</a> ');
                                    huanhang = true;
                                }
                                // actions.push('<a  class="' + proFlag + '" href="javascript:void(0)" onclick="$.operate.recallTab(\'' + row.id + '\')" style="color : #c90000">撤回&nbsp;&nbsp;&nbsp;&nbsp;</a> ');
                            }

                            // else if(row.state == 3 || row.state == 5 || row.state == 7){
                            //     if (row.userId == row.uid){
                            //     actions.push('<a  class="' + proFlag + '" href="javascript:void(0)" onclick="$.operate.recallTab(\'' + row.id + '\')" style="color : #c90000">撤回&nbsp;&nbsp;&nbsp;&nbsp;</a> ');
                            //     huanhang = true;
                            //     }
                            // }
                            else if(row.state ==  2){
                                actions.push('<a  class="' + proFlag + '" href="javascript:void(0)" onclick="$.operate.recallTab(\'' + row.id + '\')" style="color : #c90000">撤回&nbsp;&nbsp;&nbsp;&nbsp;</a> ');
                                if (hechaFlag != 'hidden'){
                                actions.push('<a  class="' + hechaFlag + '" href="javascript:void(0)" onclick="$.operate.detailTab(\'' + row.id + '/hecha' + '\')">核查&nbsp;&nbsp;&nbsp;&nbsp;</a> ');
                                }
                                huanhang = true;
                            }else
                            if(row.state ==  4) {
                            if(hechaFlag != 'hidden') {
                                actions.push('<a  class="' + hechaFlag + '" href="javascript:void(0)" onclick="$.operate.recallTab(\'' + row.id + '\')" style="color : #c90000">撤回&nbsp;&nbsp;&nbsp;&nbsp;</a> ');
                                huanhang = true;
                            }
                            if (chayueFlag != 'hidden') {
                                actions.push('<a  class="' + chayueFlag + '" href="javascript:void(0)" onclick="$.operate.detailTab(\'' + row.id + '/chayue' + '\')">查阅&nbsp;&nbsp;&nbsp;&nbsp;</a> ');
                                huanhang = true;
                            }
                            }

                            else if(row.state ==  6){
                                if (chayueFlag != 'hidden') {
                                actions.push('<a  class="' + chayueFlag + '" href="javascript:void(0)" onclick="$.operate.recallTab(\'' + row.id + '\')" style="color : #c90000">撤回&nbsp;&nbsp;&nbsp;&nbsp;</a> ');
                                huanhang = true;
                              }}

                            if (huanhang) {
                                actions.push('<br>'); // 只有前面有按钮时才换行

                            }
                            actions.push('<a class="' + editInfo + '" href="javascript:void(0)" onclick="$.operate.detailTab(\'' + row.id +'/chakan'+ '\')">查看&nbsp;&nbsp;&nbsp;&nbsp;</a> ');
                            actions.push('<a  data-toggle="modal" data-target="#lcjl_Moda" onclick="showhistory(' + row.id + ',' + row.state + ')" >流程记录&nbsp;</a> ');

                            return actions.join('');

                        }
                    }]
            };
            $.table.init(options);
            window.addEventListener("storage",function (event){
                if (event.key==="year"){
                    // 销毁表格，再初始化
                    $('#bootstrap-table').bootstrapTable('destroy');
                    initTable(options)
                }

            })
        });
    </script>
    <script>
        function downloadFiles(id) {
            window.location.href = ctx + 'common/HXdownloadZip?id='+id;
        }
    </script>
    <script>
        function downloadFiles(id) {
            window.location.href = ctx + 'common/HXdownloadZip?id='+id;
        }

        function rowStyle0(row, index) {
            // 定义状态值与颜色的映射关系
            const stateColorMap = {
                6: '#67c23a', // 完结 绿色
                3: '#e6a344', 5: '#e6a344', 7: '#e6a344',11: '#e6a344', // 被驳回，草稿 黄色
                1: '#2c99ff', 2: '#2c99ff', 4: '#2c99ff', // 审核中 蓝色
            };

            // 统一将 row.state 转换为字符串进行查找
            const state = String(row.state);

            // 根据状态值查找对应的颜色
            if (state in stateColorMap) {
                return {
                    css: { color: stateColorMap[state] }
                };
            }

            // 默认样式（可自定义）
            return {
                css: { color: '#000000' } // 默认黑色
            };
        }

        function showhistory(id,state) {
            updateProgressStepColor(state)
            //查询配乐记录
            $.ajax({
                url: prefix + '/bhyy/'+id,
                type: 'POST',
                data: {
                    kid: id
                },
                success: function (response) {
                    const eventList = document.getElementById('event-list');
                    eventList.innerHTML = '';
                    response.rows.sort((a, b) => new Date(b.createTime) - new Date(a.createTime));
                    response.rows.forEach(function (row) {
                        const li = document.createElement('li');
                        li.innerHTML = `
                                   <div class="event-item">
                            <div class="event-content">
                                <i class="node-icon"></i>
                                <span class="time" id="current-time">${row.createTime}</span>
                                <span class="txt">[${row.state}] - ${row.uname}</span>
                            </div>
                        </div>
                    `;
                        eventList.appendChild(li);
                    });
                },
                error: function () {
                    alert('Failed to fetch event history.');
                }
            });
        }

        function updateProgressStepColor(state) {
            // 获取所有步骤元素
            const steps = document.querySelectorAll('.progress_inner__step');
            const progressBar = document.querySelector('.progress_inner__bar--progress');

            // 遍历所有步骤，重置样式
            steps.forEach(step => {
                step.classList.remove('active', 'completed', 'pending');
                step.querySelector('.status-text').classList.remove('active', 'completed');
            });

            // 根据 state 设置相应的步骤颜色
            if([11, 3, 5, 7].includes(state)) {
                document.getElementById('step-1').classList.add('active');
                document.getElementById('step-1').querySelector('.status-text').classList.add('active');
                progressBar.style.width = '0';
            } else if (state === 6) {
                document.getElementById('step-1').classList.add('completed');
                document.getElementById('step-1').querySelector('.status-text').classList.add('completed');
                document.getElementById('step-2').classList.add('completed');
                document.getElementById('step-2').querySelector('.status-text').classList.add('completed');
                document.getElementById('step-3').classList.add('completed');
                document.getElementById('step-3').querySelector('.status-text').classList.add('completed');
                progressBar.style.width = '100%';
            } else if ([1, 2, 4 ].includes(state)) {
                document.getElementById('step-1').classList.add('completed');
                document.getElementById('step-1').querySelector('.status-text').classList.add('completed');
                document.getElementById('step-2').classList.add('active');
                document.getElementById('step-2').querySelector('.status-text').classList.add('active');
                progressBar.style.width = '50%';
            } else {
                // 默认情况下，所有步骤为灰色
                steps.forEach(step => {
                    step.classList.add('pending');
                    step.querySelector('.status-text').classList.add('pending');
                });
            }
        }



        document.addEventListener('DOMContentLoaded', function () {
            // 初始化显示当前时间
            document.getElementById('current-time').textContent = getCurrentTime();
        });
    </script>
<script>
    var options = {
    url: prefix + "/list",
    queryParams: function(params) {
        params.dname = $('input[name="dname"]').val(); // 将输入框的值传给后端
        return params;
    }
};

</script>
</body>
</html>